<template>
  <div class="left_navbox">
    <div class="left_nav">
      <el-row class="tac">
        <div class="touxiang_img">
          <img :src="userimg">
        </div>
        <el-col :span="12">
          <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">
            <el-submenu index="1">
              <template slot="title">
                <span>商品</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="1-1" @click="shangPingfn">商品列表</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group>
                <el-menu-item index="1-2" @click="dingDanfn">订单列表</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
    export default {
        name: "leftnav",
      data() {
        return {
          userimg:localStorage.getItem('headimg'),
        }
      },
      methods:{
        handleOpen(key, keyPath) {
        },
        handleClose(key, keyPath) {
        },
        shangPingfn() {
          this.$router.push({path:'/home'})
        },
        dingDanfn() {
          this.$router.push({path:'/oder'})
        },
      },
    }
</script>

<style scoped lang="less">
  .left_navbox{
    position: fixed;
    width: 200px;
    top: 0;
    left: 0;
    height: 100%;
    background-color: rgb(84, 92, 100);
    .left_nav{
      width: 200px;
      .touxiang_img{
        width: 100%;
        text-align: center;
        margin-top: 20px;
        img{
          width: 40px;
          height: 40px;
          border-radius: 20px;
        }
      }
      .el-menu-vertical-demo{
        width: 200px;
      }
    }
  }
</style>
